<template>
  <div
    :class="[
      'u3-textarea',
      { 'is-error': state === 2, 'is-right': state === 1, 'is-focus': true },
    ]"
  >
    <textarea
      ref="textarea"
      v-bind="$attrs"
      class="u3-textarea__input"
      wrap="virtual"
      rows="1"
      :value="currentValue"
      :readonly="readonly"
      :style="calcStyleHeight"
      @input="handleInput"
      @focus="handleFocus"
      @blur="handleBlur"
      @change="handleChange"
    />
    <template v-if="state > 0">
      <div class="u3-textarea__icon" :style="calcIconStyle" />
    </template>
  </div>
</template>
<script>
import { markResultType } from '../../../utils/constants'
import calcTextareaHeight from './calcTextareaHeight'

export default {
  name: 'U3Textarea',
  inject: {
    page: {
      default: '',
    },
  },
  props: {
    order: {
      type: Number,
      default: 1,
    },
    value: [String, Number],
    maxRows: {
      type: Number,
      default: 0,
    },
    state: {
      type: Number,
      default: markResultType.DEFAULT,
    },
    readonly: Boolean,
  },
  data() {
    return {
      currentValue:
        this.value === undefined || this.value === null ? '' : this.value,
      isFocus: false,
      styleheight: {},
      minHeight: 44,
      styleicon: { 'margin-top': '0.09rem', 'margin-bottom': '0.09rem' },
    }
  },
  computed: {
    calcStyleHeight() {
      return this.styleheight
    },
    calcIconStyle() {
      return this.styleicon
    },
    calcTheme() {
      return this.page.fullScreen
    },
  },
  watch: {
    calcTheme() {
      // console.log('....change size');
      this.resizeInput()
    },
  },
  mounted() {
    this.resizeInput()
  },
  methods: {
    handleBlur(event) {
      this.isFocus = false
      this.$emit('blur', event)
    },
    handleFocus(event) {
      if (this.readonly) return
      if (!this.readonly) this.isFocus = true
      this.$emit('focus', event)
    },
    handleChange(event) {
      this.$emit('change', event.target.value, this.order)
    },
    handleInput(event) {
      const { value } = event.target
      this.setCurrentValue(value)
      this.$emit('input', value)
    },
    setCurrentValue(val) {
      this.currentValue = val
      this.$nextTick(this.resizeInput)
    },
    resizeInput() {
      this.styleheight = calcTextareaHeight(
        this.$refs.textarea,
        1,
        this.maxRows,
        this.state
      )
      if (this.state > 0) {
        // 回显
        let { height } = this.styleheight
        // 获取 textarea 的高度
        height = parseFloat(height)
        const marginSize = ((height + 17 - 44) / 2).toFixed(1)
        this.styleicon = {
          'margin-top': `${marginSize}px`,
          'margin-bottom': `${marginSize}px`,
        }
      }
    },
  },
}
</script>
<style lang="scss">
@import '../../../scss/common/index.scss';
@import '../../../scss/textarea/variables.scss';
@include b(textarea) {
  @include themify($themes-textarea) {
    background-color: themed('input-bgc');
    color: themed('color');
    font-size: themed('textAreaFs');
    min-height: themed('textAreaH');
  }
  background-color: $c-t-2;
  border-radius: $textarea-radius;
  font-size: $pct-answer-area-2;
  width: $textarea-width;
  border: $textarea-border solid $c-t-2;
  min-height: $textarea-min-height;
  @include e(icon) {
    float: right;
    display: inline-block;
    width: $textarea-icon-width;
    height: $textarea-icon-width;
    margin: $textarea-icon-margin-right;
    font-family: 'u3-icons' !important;
    line-height: $textarea-icon-width;
    text-align: center;
  }
  @include e(input) {
    outline: none;
    resize: none;
    margin: $textarea-input-margin-top;
    display: inline-block;
    font-size: $pct-answer-area-2;
    width: $textarea-width;
    text-align: left;
    padding: $textarea-input-padding;
    vertical-align: middle;
    line-height: $text-line-height;
    caret-color: $c-1;
    /*删除特有的样式属性 */
    box-sizing: border-box;
    border: none;
    background-color: transparent;
    @include themify($themes-textarea) {
      color: themed('color');
      font-size: themed('textAreaFs');
    }
  }
  &.is-error {
    background-color: $c-t-warning-2;
    border: $textarea-border solid $c-t-warning-1;
    @include themify($themes-textarea) {
      background-color: themed('input-bgc');
    }
    @include e(input) {
      color: $c-t-warning-1;
      width: $textarea-width - 1.2rem;
    }
    @include e(icon) {
      color: $c-t-warning-1;
      &::before {
        content: $textarea-error-font;
      }
    }
  }
  &.is-right {
    background-color: $c-t-correct-2;
    border: $textarea-border solid $c-t-correct-1;
    @include themify($themes-textarea) {
      background-color: themed('input-bgc');
    }
    @include e(input) {
      color: $c-t-correct-1;
      width: $textarea-width - 1.2rem;
    }
    @include e(icon) {
      color: $c-t-correct-1;
      &::before {
        content: $textarea-right-font;
      }
    }
  }
  &.is-focus {
    border: $textarea-border solid $c-1;
  }
}
</style>
